<template>
  <view class="container">
    <NavBar
      title="下载记录"
      @rightTextClick="rightTextClick"
      :right-text="rightText"
    />
    <!-- <view style="height: 140rpx"></view> -->

    <view>
      <view class="download_page" v-if="btnsArr.length">
        <view class="bnts">
          <view
            v-for="(i, index) in btnsArr"
            :key="index"
            :class="index == isActive ? 'active' : ''"
            @click="clickItem(index)"
          >
            <text>{{ i.title }}</text>
          </view>
        </view>
      </view>
      <!-- 列表数据 1 -->
      <view class="list">
        <!-- <view v-if="total" class="list_con" :style="isShowCheckBox?'padding-bottom: 180rpx;':''"> -->
        <view v-if="total" class="list_con">
          <view
            v-for="(item, index) in listArr"
            :key="index"
            class="content_item"
            :style="isShowCheckBox ? 'left: 80rpx' : ''"
          >
            <radio-group
              v-if="isShowCheckBox"
              class="checkbox_group"
              :data-item="item"
              @change="checkboxChange"
            >
              <label>
                <radio :value="index" :checked="item.isChoose" color="#0b847b" />
              </label>
            </radio-group>
            <StudyItem
              v-if="isActive == 0"
              :itemObj="item"
              @click="clickItemObj(item)"
              :isDrafts="true"
            />
            <XinDeItem v-else :dayListObj="item" @click="clickXinde(item)" />
          </view>
        </view>
        <view v-else style="margin-top: 50rpx">
          <NoData />
        </view>
      </view>
      <!-- 列表数据 2 -->
      <view class="all-delall-btn" v-if="isShowCheckBox">
        <radio-group :data-item="item" @change="checkAll">
          <label>
            <radio value="allChoose" :checked="isAllChoose" color="#0b847b" />
            <text v-if="isAllChoose"> 全不选 </text>
            <text v-else> 全选 </text>
          </label>
        </radio-group>
        <button
          type="warn"
          style="background: #e86565"
          @click="delAllFn"
          class="del-btn"
          :disabled="!delArr.length"
        >
          删除
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import {
  apiEducationList,
  apiDeleteDownList, // 11 删除下载记录
  apiDangDownXinDeList, // 15
} from "../../net/educationalLearning.js";

import NavBar from "@/components/NavBar.vue";
import NoData from "@/components/NoData.vue";
import StudyItem from "./common/study_item.vue";
import XinDeItem from "../DJActivityDaylist/xindeItem.vue";

export default {
  components: {
    NavBar,
    NoData,
    StudyItem,
    XinDeItem,
  },
  data() {
    return {
      delArr: [], //删除元素id
      rightTextColor: "red",
      rightText: "删除",
      isShowCheckBox: false,
      total: 0,
      listArr: [],
      params: {
        learningType: 1,
        status: 2,
        userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
        pageNum: 1,
        pageSize: 10,
      },
      paramsXin: {
        learningType: null,
        userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
        // djDeptId: JSON.parse(uni.getStorageSync("loginUserInfo")).djDeptId,
        pageNum: 1,
        pageSize: 10,
      },
      isActive: 0,
      btnsArr: [
        // {
        //   index: 0,
        //   title: "全部",
        //   type: null,
        // },
        // {
        //   index: 2,
        //   title: "文档资料",
        //   type: 2,
        // },
        // {
        //   index: 1,
        //   title: "电子图书",
        //   type: 3,
        // },
        // {
        //   index: 4,
        //   title: "专题学习",
        //   type: 4,
        // },
      ],
    };
  },

  onLoad(options) {
    // 获取当前登录人身份信息
    let permission = JSON.parse(uni.getStorageSync("loginUserInfo")).permission;
    console.log(permission);
    if (permission.indexOf("common") > -1) {
      this.params.learningType = 5;
    }
    if (
      permission.indexOf("admin") > -1 ||
      permission.indexOf("superAdmin") > -1
    ) {
      this.params.learningType = 1;
      this.btnsArr = [
        {
          title: "视频学习",
          type: 1,
        },
        {
          title: "学习心得",
          type: 5,
        },
      ];
    }

    this.init();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.listArr = [];
    this.params.pageNum = 1;
    this.getDangDownXinDeList();
  },
  // 上拉加载
  onReachBottom() {
    if (this.params.pageNum * this.params.pageSize > this.total) {
      uni.showToast({
        title: "数据全部加载",
        duration: 2000,
      });
    } else {
      this.params.pageNum++;
      this.getDangDownXinDeList();
    }
  },

  methods: {
    // 全选
    checkAll(e) {
      console.log(e);
      this.isAllChoose = !this.isAllChoose;
      this.delArr = [];
      if (this.isAllChoose) {
        for (let i = 0; i < this.listArr.length; i++) {
          this.listArr[i].isChoose = true;
          this.delArr.push(this.listArr[i].recordId);
        }
      } else {
        for (let i = 0; i < this.listArr.length; i++) {
          this.listArr[i].isChoose = false;
        }
      }
    },
    clickXinde(i) {
      uni.setStorage({
        key: "itemParams",
        data: JSON.stringify(i),
      });
      uni.navigateTo({
        url: "../DJjiaoyuxuexi/xinde/list?flag=false",
      });
    },
    // 确认删除
    delAllFn() {
      let data = this.delArr.join(",");
      console.log(data);

      apiDeleteDownList(data)
        .then((res) => {
          this.params.pageSize = 10;
          this.params.pageNum = 1;
          this.listArr = [];
          this.isAllChoose = false;
          this.delArr = [];
          this.isShowCheckBox = false;
          this.rightText = "删除";
          this.rightTextColor = "red";
          this.getDangDownXinDeList();
        })
        .catch((err) => {
          this.params.pageSize = 10;
          this.params.pageNum = 1;
          this.listArr = [];
          this.isAllChoose = false;
          this.delArr = [];
          this.isShowCheckBox = false;
          this.rightText = "删除";
          this.rightTextColor = "red";
          this.getDangDownXinDeList();
        });
    },

    // 删除选中复选框
    checkboxChange(e) {
      console.log(e);
      let index = e.detail.value;
      this.listArr[index].isChoose = !this.listArr[index].isChoose;

      let id = e.currentTarget.dataset.item.recordId;
      let isHas = this.delArr.indexOf(id) == -1 ? false : true;
      if (isHas) {
        for (let i = 0; i < this.delArr.length; i++) {
          if (id == this.delArr[i]) {
            this.delArr.splice(i, 1);
          }
        }
      } else {
        this.delArr.push(id);
      }

      this.isAllChoose =
        this.delArr.length == this.listArr.length ? true : false;
    },
    // 删除
    rightTextClick() {
      console.log(this.rightText);
      if (this.rightText == "删除") {
        this.rightText = "取消";
        this.isShowCheckBox = true;
      } else {
        this.rightText = "删除";
        this.isShowCheckBox = false;
      }
      if (this.rightTextColor == "red") {
        this.rightTextColor = "#989898";
      } else {
        this.rightTextColor = "red";
      }
    },

    // 点击数据,跳转页面
    clickItemObj(item) {
      let params = {
        ...item,
        flag: false,
      };
      if (item.learningType == 1) {
        params.Type = "视频学习";
      } else if (item.learningType == 2) {
        params.Type = "文档资料";
      } else if (item.learningType == 3) {
        params.Type = "电子图书";
      } else if (item.learningType == 4) {
        params.Type = "专题学习";
      } else if (item.learningType == 5) {
        params.Type = "学习心得";
      }
      uni.setStorage({
        key: "itemParams",
        data: JSON.stringify(params),
      });
      uni.navigateTo({
        url: `./historyInfo?isShowCollec=false`,
      });
    },

    // 点击导航
    clickItem(index) {
      if (index == this.isActive) {
        return;
      } else {
        this.params.pageNum = 1;
        this.params.pageNum = 1;

        this.isActive = index;
        this.total = 0;
        this.listArr = [];
      }
      console.log(this.isActive);

      this.params.pageSize = 10;
      this.params.pageNum = 1;
      this.listArr = [];
      this.isAllChoose = false;
      this.delArr = [];
      this.isShowCheckBox = false;
      this.rightText = "删除";
      this.rightTextColor = "red";

      if (index == 0) {
        this.params.learningType = 1;
        this.getDangDownXinDeList();
      } else if (index == 1) {
        this.params.learningType = 5;
        this.getDangDownXinDeList();
      }
    },

    // 学习心得数据
    getDangDownXinDeList() {
      apiDangDownXinDeList(this.params)
        .then((res) => {
          console.log(res.data);
          if (res.code === 0) {
            this.total = res.total;
            this.listArr = [...res.data];

            // 处理学习类型
            for (let i = 0; i < this.listArr.length; i++) {
              for (let k = 0; k < this.typeList.length; k++) {
                if (this.listArr[i].learningType == this.typeList[k].key) {
                  this.listArr[i].Type = this.typeList[k].value;
                }
              }
            }
          } else {
            this.total = 0;
            this.listArr = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.total = 0;
          this.listArr = [];
        });
    },

    // 获取下载历史列表
    // getDownList() {
    //   apiUploadHistoryList(this.params)
    //     .then((res) => {
    //       if (res.code === 0) {
    //         this.total = res.total;
    //         this.listArr = this.listArr.concat(res.data);

    //         if (this.listArr.length) {
    //           // 处理学习类型
    //           for (let i = 0; i < this.listArr.length; i++) {
    //             for (let k = 0; k < this.typeList.length; k++) {
    //               if (this.listArr[i].learningType == this.typeList[k].key) {
    //                 this.listArr[i].Type = this.typeList[k].value;
    //               }
    //             }
    //           }
    //         }
    //       } else {
    //         this.total = 0;
    //         this.listArr = [];
    //       }
    //       uni.stopPullDownRefresh();
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //       this.total = 0;
    //       this.listArr = [];
    //       uni.stopPullDownRefresh();
    //     });
    // },
    // 学习类型
    getEducationList() {
      apiEducationList()
        .then((res) => {
          if (res.code === 0) {
            this.typeList = res.data;
          } else {
            this.typeList = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.typeList = [];
        });
    },

    init() {
      this.getEducationList();
      this.getDangDownXinDeList();
      this.getEducationList();
    },
  },
};
</script>

<style>
page {
  background: #f9f9f9;
}

.active {
  color: #0b847b;
  border-bottom: 4rpx solid #0b847b;
}

.container {
  height: 100vh;
  background: #fff;
}

.list_con {
  width: 750rpx;
  margin: 0 auto;
  background: #fff;
}

.content_item {
  width: 710rpx;
  padding: 0 20rpx;
  height: 100%;
  padding-left: 20rpx;
  box-sizing: border-box;
  background: #fff;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
  left: 0;
  border-bottom: 1px solid #eee;
}

.content_item:last-child {
  border-bottom: none;
}

.bnts {
  width: 750rpx;
  height: 80rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 32rpx;
}

.bnts text {
  display: inline-flex;
  padding-bottom: 6rpx;
  box-sizing: border-box;
}

.all-delall-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  box-sizing: border-box;

  width: 750rpx;
  height: 120rpx;
  background: #ffffff;
  border-top: 1px solid #ebedf1;

  position: fixed;
  bottom: 0;
  z-index: 100;
}

.del-btn {
  margin: 0;
  width: 340rpx;
  height: 88rpx;
  background: #e86565;
  border-radius: 8rpx;
}
</style>
